<template>
  <el-drawer
    size="100%"
    :append-to-body="true"
    :visible.sync="visible"
    :before-close="onClose"
  >
    <div slot="title">
      <el-button type="text"><i class="el-icon-document" @click="onSave">&nbsp保存</i></el-button>
      <el-button type="text"><i class="el-icon-delete" @click="clear">&nbsp清空</i></el-button>
    </div>
    <div class="design-index">
      <div class="design-tools" style="height: 100%;">
        <el-scrollbar style="height: 100%;">
          <draggable
            v-model="list"
            :options="{group:{name: 'people',pull:'clone'}}"
            animation="300"
            sort="false"
            :clone="onClone"
          >
            <transition-group style="min-height:10000px;display: block;margin-bottom: 100px;">
              <div v-for="item in list" :key="item.id.value" class="tools-item-body">
                {{ item.title.value }}
              </div>
            </transition-group>
          </draggable>
        </el-scrollbar>
      </div>
      <div class="design-work">
        <el-scrollbar style="height: 10000px;width: 100%;">
          <el-row style="padding-right: 5px;padding-left: 5px;" :gutter="5">
            <draggable
              v-model="inputs"
              animation="300"
              group="people"
              sort="false"
              :clone="onClone"
            >
              <transition-group style="min-height:20000px;display: block;">
                <el-col
                  v-for="item in inputs"
                  :key="item.id.value"
                  :span="item.span.value"
                >
                  <div class="component-item" @click="onClick(item)" @contextmenu="showMenu(item.id.value)">
                    <vue-context-menu
                      :context-menu-data="contextMenuData"
                      :transferId="activeId"
                      @copyOperation="copyOperation"
                      @deleteOperation="deleteOperation"
                    />
                    <component :is="item.components.value" :model="item"/>
                  </div>
                </el-col>
              </transition-group>
            </draggable>
          </el-row>
        </el-scrollbar>
      </div>
      <div class="design-prop" style="height: 100%;overflow: hidden;">
        <el-scrollbar style="height: 1000px;">
          <el-form label-width="80px" label-position="left">
            <div v-for="(item,index) in inputs" :key="index" v-if="item.id.value === activeId">
              <el-form-item
                v-for="(propertys,index) in Object.keys(item)"
                :key="index"
                :label="item[propertys].name"
                style="text-align: left"
              >
                <component
                  :is="item[propertys].type"
                  v-model="item[propertys].value"
                  size="mini"
                  :disabled="item[propertys].disabled"
                  :type="item[propertys].key"
                  clearable
                >
                  <el-option
                    v-if="item[propertys].options"
                    v-for="optionItem in (item[propertys].options)"
                    :key="optionItem.label"
                    :label="optionItem.label"
                    :value="optionItem.value"
                  >
                  </el-option>
                </component>
              </el-form-item>
            </div>
          </el-form>
        </el-scrollbar>
      </div>
    </div>
  </el-drawer>
</template>

<script>

import settings from '@/setting/panel'
import draggable from 'vuedraggable'
import { deepClone, uuid } from '@/utils/'
import { getDefaultSysPortal, save } from '@/api/sysPortal'

export default {
  components: {
    draggable
  },
  data() {
    return {
      visible: false,
      list: settings,
      activeId: '',
      inputs: [],
      form: {
        id: '',
        context: ''
      },
      contextMenuData: {
        axis: {
          x: null,
          y: null
        },
        menulists: [
          {
            fnHandler: 'copyOperation',
            icoName: 'el-icon-document-copy',
            btnName: '复制'
          },
          {
            fnHandler: 'deleteOperation',
            icoName: 'el-icon-delete',
            btnName: '删除'
          }
        ]
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      getDefaultSysPortal().then(res => {
        if (res.code === 20000 && res.data) {
          this.form.id = res.data.id
          this.inputs = JSON.parse(res.data.context)
        }
      })
    },
    onShow() {
      this.visible = true
    },
    onClose() {
      this.visible = false
      this.$emit('callBack')
    },
    onClone(origin) {
      return this.cloneItem(origin)
    },
    cloneItem(originObj) {
      const obj = deepClone(originObj)
      Object.keys(obj).forEach((item) => {
        if (item === 'id') {
          obj.id.value = uuid()
        }
        if (item === 'name') {
          obj.name.value = 'field_' + uuid()
        }
      })
      return obj
    },
    onClick(item) {
      if (item) {
        this.activeId = item.id.value
      }
    },
    showMenu(id) {
      this.activeId = id
      event.preventDefault()
      var x = event.clientX
      var y = event.clientY
      this.contextMenuData.axis = {
        x,
        y
      }
    },
    deleteOperation() {
      this.inputs.forEach((item, index) => {
        if (item.id.value === this.activeId) {
          this.inputs.splice(index, 1)
        }
      })
    },
    copyOperation() {
      this.inputs.forEach((item, index) => {
        if (item.id.value === this.activeId) {
          this.inputs.push(this.cloneItem(item))
        }
      })
    },
    clear() {
      this.inputs = []
    },
    onSave() {
      this.form.context = JSON.stringify(this.inputs)
      save(this.form).then(res => {
        if (res.code === 20000) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
      })
    }
  }
}
</script>

<style scoped>

/deep/ .el-drawer__header {
  padding: 10px 10px;
  margin-bottom: 0px !important;
}

/deep/ .el-card__header {
  padding: 10px 10px;
  margin-bottom: 0px !important;
}

.design-index {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.design-tools {
  width: 10%;
  height: 100%;
  padding: 10px 10px;
  border: 1px solid #97a8be;
}

.design-prop {
  width: 15%;
  height: 100%;
  text-align: center;
}

.design-work {
  width: 75%;
  height: 100%;
  background-color: #ffffff;
}

.work-context {
  min-height: 500px;
}

.tools-item-body {
  margin-top: 10px;
  font-size: 14px;
  width: 100%;
  height: 50px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
  cursor: move;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}

.component-item {
  cursor: move;
}

.design-prop {
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #97a8be;
}

.design-work {
  border-top: 1px solid #97a8be;
}

.el-col {
  margin-top: 2px;
}

.el-form {
  padding: 20px 20px;
}

.vue-contextmenu-listWrapper {
  padding-left: 10px;
}

.menu-item-title {
  font-size: 12px;
}

/deep/ .is-horizontal {
  display: none;
}
</style>
